<template>
  <div class="timeline-demo">
    <h3 class="title">示例</h3>
    <div>
      <d-timeline :pending="true">
        <d-timeline-item>北京</d-timeline-item>
        <d-timeline-item color="green">长春</d-timeline-item>
        <d-timeline-item>到达呼伦贝尔</d-timeline-item>
        <d-timeline-item icon="d-icon-task">蒙古的草原</d-timeline-item>
        <d-timeline-item icon="d-icon-complete" color="green">满洲里，外面的俄罗斯是什么样子的世界？</d-timeline-item>
        <d-timeline-item>
          <a href="">加载更多</a>
        </d-timeline-item>
      </d-timeline>
    </div>
    <h3 class="title">示例2</h3>
    <div>
      <d-timeline :pending="true" :time="true" :time-width="200">
        <d-timeline-item>北京</d-timeline-item>
        <d-timeline-item color="green">长春</d-timeline-item>
        <d-timeline-item>
          <i class="d-icon-user primary-color" slot="icon"></i>
          <div slot="time">2012-12-23</div>
          <div slot="content">到达呼伦贝尔</div>
        </d-timeline-item>
        <d-timeline-item icon="d-icon-task">
          <div slot="time">
            <p>2012-12-23</p>
            <p>天气晴</p>
          </div>
          <div slot="content">蒙古的草原</div>
        </d-timeline-item>
        <d-timeline-item icon="d-icon-complete" color="green">
          <div slot="time">
            <p>2012-12-23</p>
            <p>小雨</p>
          </div>
          <div slot="content">
            <p v-font="18">春夜洛城闻笛</p>
            <p class="dark3-color">谁家玉笛暗飞声</p>
            <p class="dark3-color">散入春风满洛城</p>
            <p class="dark3-color">此夜曲中闻折柳</p>
            <p class="dark3-color">何人不起故园情</p>
          </div>
        </d-timeline-item>
        <d-timeline-item>
          <a href="">加载更多</a>
        </d-timeline-item>
      </d-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'timelineDemo',
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
.timeline-demo
  p
    margin 2px 0
</style>
